<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../resources/css/articledetails.css" />
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/js/getUrlString.js"></script>
		<script type="text/javascript" src="../../resources/js/postbird-img-glass.min.js"></script>
	</head>

	<body>
		<jsp:include page="/pages/common/header.jsp"></jsp:include>

		<div class="main">
			<div class="content">
				<!--文章内容-->
				<div class="l_content">
					<!--文章内容-->

					<div class="article_content">
						<div class="article_header">
							<!--标题-->
							<div class="title">
							</div>

							<div class="h_other">
								<!--作者-->
								<span class="layui-icon-username layui-icon">
									
								</span>
								<span class="mr30" id="mr1"></span>
								<!--浏览量-->
								<span class="layui-icon-log layui-icon">
									
								</span>
								<span class="mr30" id="mr2">123</span>
								<!--评论人数-->
								<span class="layui-icon-dialogue layui-icon">
									
								</span>
								<span class="mr30" id="mr3">12</span>
							</div>
						</div>
						<!--文章内容-->
						<div class="r_content">

						</div>
						<!--评论表单-->
						<form method="post" class="layui-form">
							<textarea id="comment_area" name="comment.commentContent" class="layui-textarea"></textarea>

							<input type="hidden" id="hiddenvalue" name="article.articleId" value="" />
							<div class="over_box">

								<button class="layui-btn layui-btn-normal comm" lay-submit="" lay-filter="play">评论</button>
							</div>
						</form>

					</div>
					<!--评论-->

					<div class="comment">
						<ul class="comment_box">
						</ul>
					</div>
					<div style="clear: both;"></div>
				</div>
				<!--右侧box-->
				<div class="r_other">
					<div class="user">
						<div class="usericon">
							<img src="../../resources/images/s3.png" />
						</div>
						<div class="userdetails">
							<div class="r_username">
							</div>
							<p class="textdetails">
							</p>
						</div>
						<div class="fans">
							<div class="userfans">
								<p class="col">粉丝</p>
								<p class="nb"></p>
							</div>
							<span class="layui-btn layui-btn-normal" id="gz">
								关注
							</span>
							<div class="guanzhu">
								<p class="col">关注</p>
								<p class="nb2"></p>
							</div>
							<div style="clear: both;"></div>

						</div>
					</div>

				</div>
				<div style="clear: both;"></div>
				<!--分页-->
				<div id="page">
				</div>
			</div>

		</div>

		<jsp:include page="/pages/common/footer.jsp"></jsp:include>
		<script>
			layui.use("layedit", function() {
				var layedit = layui.layedit;
				var index = layedit.build('comment_area', {
					tool: ['left', 'center', 'right', '|', 'face'],
					height: 100
				});

				layui.use('form', function() {

					var form = layui.form;
					form.on('submit(play)', function() {
						var userid = '${ sessionScope.userId}'; 
						<c:choose>
							<c:when test = "${empty sessionScope.userId}" >
							layer.msg('您还未登陆！', {
								icon: 2,
								time: 2000,
								end: function() {
									var index = layer.open({
										type: 2,
										title: '注册/登陆',
										shadeClose: true,
										area: ['420px', '380px'],
										content: '/pages/relogin/login.jsp'
									});
								}
							}); 
							return false;
						</c:when> 
						</c:choose>
						var articleId = GetUrlString("articleId")
						var textcontent = layedit.getText(index);
						if(textcontent == "" || /^\s+$/g.test(textcontent)) {
							layer.msg("评论内容不能为空", {
								icon: 2
							});
							return false;
						}

						$.ajax({

							type: "post",
							url: "/comment/addArticleComment.action",
							data: {
								"comment.commentContent": textcontent,
								"article.articleId": articleId
							},
							dataType: 'json',
							success: function(data) {
								if(data == true) {
									layer.msg('评论成功！', {
										icon: 1,
										shade: 0.01
									});
									$(window.frames["LAY_layedit_1"].document).find('body').html(""); //清空评论
									document.location.reload();
								} else {
									layer.msg('评论失败', {
										icon: 2,
										time: 1000,
									});
								}

							},
							error: function() {
								layer.msg("错误");
							}

						});

						return false;
					});

				});
			});
		</script>
		<script>
			$('.repla').on('click', function() {
				layer.open({
					type: 2,
					title: '回复',
					shadeClose: true, //点击遮罩关闭层
					area: ['800px', '250px'],
					content: '../common/comment.jsp'
				});
			});
		</script>
		<script>
			$(document).ready(function() {
				layui.use("layer", function() {
					var loading = layer.msg('加载中！请稍后....', {
						icon: 16,
						shade: 0.01
					});
				});
				$.ajax({
					type: "post",
					url: "/comment/queryArticleComment.action",
					data: {
						"article.articleId": GetUrlString("articleId")
					},
					dataType: "json",
					success: function(result) {
						//						console.log(result.usersRow);
						//						console.log(result.row);
						var currpage = result.totalPage;
						var pagecount = result.pageSize;
						layui.use("laypage", function() {
							var laypage = layui.laypage;
							laypage.render({
								elem: 'page',
								count: currpage * pagecount, //总页数
								limit: 7,
								jump: function(obj, first) {
									console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
									console.log(obj.limit); //得到每页显示的条数
									var pageIndex = obj.curr;
									var pageLimit = obj.limit;
									//首次不执行
									if(!first) {
										$(".comment_box").html("");
										toPage(pageIndex, pageLimit);
									}
								}
							});
						});
						for(var i = 0; i < result.usersRow.length; i++) {
							for(var j = i + 1; j < result.usersRow.length;) {
								if(result.usersRow[i].userId == result.usersRow[j].userId) {
									result.usersRow.splice(j, 1); //去除重复的对象；
								} else {
									j++;
								}
							}
						}
						var i = 0;
						$.each(result.usersRow, function(usersRowindex, usersRowitem) {
							$.each(result.row, function(rowindex, rowitem) {
								if(usersRowitem.userId == rowitem.userId) {
																		console.log("");
									if(usersRowitem.userPhoto == null) {
										usersRowitem.userPhoto = "../../resources/images/foot-logo.png";
									}
									var li = "<li class='com_box'><div class='l_img'><img src='" + usersRowitem.userPhoto + "'/></div>";
									li += "<div class='r_box'><div class='username'><a href=''>" + usersRowitem.userName + "</a>";
									li += "<span class='replay_time mr30'>" + rowitem.commentTime + "</span></div>";
									li += "<p class='text'>" + rowitem.commentContent + "</p>";
									li += "<div class='other'><span class='repla'><span class='replay layui-icon layui-icon-dialogue'></span><span class='mr30'></span></span>";
									li += "<span class='dianzan layui-icon layui-icon-praise'><input type='hidden' value='" + rowitem.commentId + "'></span>";
									li += "<span class='mr30'>" + rowitem.goodNumber + "</span>";
									li += "<span class='cai layui-icon layui-icon-tread'><input type='hidden' value='" + rowitem.commentId + "'></span><span class='mr30'>" + rowitem.badNumber + "</span></div></div></li>";
									$(".comment_box").append(li);
									i++;
								}
							});
						});

						$('.repla').on('click', function() {
							layer.open({
								type: 2,
								title: '回复',
								shadeClose: true, //点击遮罩关闭层
								area: ['800px', '250px'],
								content: '../common/comment.jsp'
							});
						});

						$(".comment_box li").each(function(index) {
							$(this).find(".dianzan").click(function() {
								alert($(this).find("input").val());
							});
							$(this).find(".cai").click(function() {
								alert($(this).find("input").val());
							});

						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
					}
				});
				var userid = '${ sessionScope.userId}';
				$.ajax({
					type: "post",
					url: "/article/queryArticleDeatils.action",
					data: {
						"article.articleId": GetUrlString("articleId")
					},
					dataType: "json",
					success: function(articleDetails) {
						$(".title").html(articleDetails.article.articleTitle);
						$(".artcle_type").html(articleDetails.article.articleTypeId);
						$(".r_content").html(articleDetails.article.articleContent);
						$("#mr1").html(articleDetails.userName);
						$("#mr2").html(articleDetails.article.readNumber);
						$("#mr3").html(articleDetails.article.commentNumber);
						$(".r_username").html(articleDetails.userName);
						$(".textdetails").html(articleDetails.userAutograph);
						$(".nb").html(articleDetails.userCercened);
						$(".nb2").html(articleDetails.userCercen);
						$(document).attr("title", articleDetails.article.articleTitle + "   |  eke专业学习交流平台");
						var useConcernId = articleDetails.article.userId;
						PostbirdImgGlass.init({
							domSelector: ".r_content img",
							animation: true,
						});
						if(userid != '') {
							$.ajax({
								type: "post",
								url: "/userConcern/isConcern.action",
								data: {
									"userConcern.userId": userid,
									"userConcern.useConcernId": useConcernId
								},
								dataType: "json",
								success: function(data) {
									if(data.result == false) {
										$("#gz").html("关	注");
										$("#gz").click(function() {
											if(userid != useConcernId) {
												$.ajax({
													type: "post",
													url: "/userConcern/addUserConCern.action",
													data: {
														"userConcern.userId": userid,
														"userConcern.useConcernId": useConcernId
													},
													dataType: "json",
													success: function(data) {
														if(data.result == true) {
															layer.msg("关注成功！", {
																icon: 1,
															});
															window.location.reload();
														}
													}
												});
											} else {
												layer.msg("不能自己关注自己！", {
													icon: 2,
												});
											}

										});
									} else {
										$("#gz").html("取消关注");
										$("#gz").css("right", "64px")
										$("#gz").click(function() {
											$.ajax({
												type: "post",
												url: "/userConcern/deletUserConCern.action",
												data: {
													"userConcern.userId": userid,
													"userConcern.useConcernId": useConcernId
												},
												dataType: "json",
												success: function(data) {
													if(data.result == true) {
														layer.msg("取消关注成功！", {
															icon: 1,
														});
														window.location.reload();
													} else {
														layer.msg("出错了！", {
															icon: 2,
														});
													}
												}
											});
										});
									}
								}
							});
						} else {
							$(document).on('click', '#gz', function() {
								layui.use('layer', function() {
									var layer = layui.layer;
									layer.msg('您还未登陆！', {
										icon: 2,
										time: 1000,
										end: function() {
											var index = layer.open({
												type: 2,
												title: '注册/登陆',
												shadeClose: true,
												area: ['420px', '380px'],
												content: '	/pages/relogin/login.jsp'
											});
										}
									});

								});
							});
						}
					},error: function() {
						layer.msg("错误", {
							icon: 2,
						});
					}
				});
			});
		</script>
		<script>
			function toPage(pageCount, pageSize) {
				var loading = layer.msg('加载中！请稍后....', {
					icon: 16,
					shade: 0.01
				});
				$.ajax({
					type: "get",
					url: "/comment/queryArticleComment.action",
					data: {
						"article.articleId": GetUrlString("articleId"),
						"pageCount": pageCount,
						"pageSize": pageSize
					},
					dataType: "json",
					success: function(result) {
						for(var i = 0; i < result.usersRow.length; i++) {
							for(var j = i + 1; j < result.usersRow.length;) {
								if(result.usersRow[i].userId == result.usersRow[j].userId) {
									result.usersRow.splice(j, 1); //去除重复的对象；
								} else {
									j++;
								}
							}
						}
						var i = 0;
						$.each(result.usersRow, function(usersRowindex, usersRowitem) {
							$.each(result.row, function(rowindex, rowitem) {
								if(usersRowitem.userId == rowitem.userId) {

									console.log(i + "-------------------------------");
									console.log(usersRowitem.userName);
									console.log(usersRowitem.userPhoto);
									console.log(rowitem.commentContent);
									console.log(rowitem.commentTime);
									console.log(rowitem.goodNumber);
									console.log(rowitem.badNumber);
									console.log(i + "-------------------------------");
									console.log("");
									if(usersRowitem.userPhoto == null) {
										usersRowitem.userPhoto = "../../resources/images/foot-logo.png";
									}
									var li = "<li class='com_box'><div class='l_img'><img src='" + usersRowitem.userPhoto + "'/></div>";
									li += "<div class='r_box'><div class='username'><a href=''>" + usersRowitem.userName + "</a>";
									li += "<span class='replay_time mr30'>" + rowitem.commentTime + "</span></div>";
									li += "<p class='text'>" + rowitem.commentContent + "</p>";
									li += "<div class='other'><span class='repla'><span class='replay layui-icon layui-icon-dialogue'></span><span class='mr30'></span></span>";
									li += "<span class='dianzan layui-icon layui-icon-praise'><input type='hidden' value='" + rowitem.commentId + "'></span>";
									li += "<span class='mr30'>" + rowitem.goodNumber + "</span>";
									li += "<span class='cai layui-icon layui-icon-tread'><input type='hidden' value='" + rowitem.commentId + "'></span><span class='mr30'>" + rowitem.badNumber + "</span></div></div></li>";
									$(".comment_box").append(li);
									i++;
								}
							});
						});

						$('.repla').on('click', function() {
							layer.open({
								type: 2,
								title: '回复',
								shadeClose: true, //点击遮罩关闭层
								area: ['800px', '250px'],
								content: '../common/comment.jsp'
							});
						});

						$(".comment_box li").each(function(index) {
							$(this).find(".dianzan").click(function() {
								alert($(this).find("input").val());
							});
							$(this).find(".cai").click(function() {
								alert($(this).find("input").val());
							});
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
					}
				});
			}
		</script>
		<script>
			//去掉所有的html标记
			function delHtmlTag(str) {
				return str.replace(/<[^>]+>/g, "");
			}
		</script>
	</body>

</html>